$(function () {
  // ********************************************************加载列表 牟东平
  function getList() {
    $.ajax({
      type: "GET",
      url: "admin/links",
      success: function (res) {
        if (res.status == 0) {
          var str = '';
          //遍历
          $.each(res.data, function (index, item) {
            str += `<tr>
              <td>${item.id}</td>
              <td>
                <div class="bg">
                  <img src="http://localhost:8888/uploads/${item.linkicon}">
                </div>
              </td>
              <td>${item.linkname}</td>
              <td>${item.linkurl}</td>
              <td>${item.linkdesc}</td>
              <td>
                <button type="button" class="layui-btn layui-btn-xs edit=${item.id}">
                  编辑
                </button>
                <button type="button" class="layui-btn btnDelete layui-btn-xs layui-btn-danger delete=${item.id}" del_id=${item.id}>
                  删除
                </button>
              </td>
            </tr>`
          });
        }

        // 完成后：
        $("tbody").html(str);
      }
    })
  }
  getList();


  



  // *********************************************************删除友情链接 牟东平
  // 需要做事件委托的子元素css选择器
  $('tbody').on('click', '.btnDelete', function () {
    let id = $(this).attr('del_id');
    $.ajax({
      url: "admin/links/" + id,
      type: "DELETE",
      success: function (res) {
        if (res.status == 0) {
          getList();
        }
      }
    })
  })

  // **********************************************************编辑友情链接
  let edit_str = `<form id="edit-form" lay-filter='editForm' class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;

  // *********************************************************添加友情链接 牟东平
  // 准备弹窗
  let add_str = `
  <form id="add-form" class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" name="linkicon" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`
  let layer = layui.layer;
  let form = layui.form
  // 给添加按钮绑定点击事件
  $('#add-link').click(function () {
    layer.open({ //利用layui框架核心功能 layer.open
      type: 1,
      title: '添加链接',
      area: ['500px', '250px'],
      content: add_str,
      success: function (dom, index) {

        $('#urlIcon').click(function () { //提交图片按键设置
          $('#linkFile').click();
        })
        $('#linkFile').change(function () {
          let img = this.files[0]
          let src = URL.createObjectURL(img)
          $('#preIcon').cropper('replace', src)
        })
        $('.layui-form').submit(function (e) {
          e.preventDefault();
          let fd = new FormData(this);
          let canvas = $('#preIcon').cropper('getCroppedCanvas', {
            width: 100, //#image 代表当前展示图片的区域标签对象
            height: 100 // width,height 任意设置的图片区域范围
          })

          canvas.toBlob(function (obj) {
            fd.set('linkicon', obj)
            $.ajax({
              url: 'admin/links',
              type: 'post',
              data: fd,
              processData: false,
              contentType: false,
              success: function (res) {
                console.log(res);
                layer.msg(res.message)
                if (res.status == 0) {
                  list();
                  layer.close(index)
                }
              }
            })
          })
        })


      }
    })
  })
})